<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .bbox{
            display: block;
            width: 100%;
            height: 800px;
            background-color: chocolate;
        }
        .box1{
            position: relative;
            height: 300px;
            width: 300px;
            background-color: aqua;
            margin: auto;
        }
        .box1 p{
            position: absolute;
            top:300px;
            right:80px;
            font-size:15px;
            color: black;
        }
      
        .box2{
            width: 300px;
            height: 300px;
            background-color: blueviolet;
            margin: auto;
            display: none;
        }
        a1{
            margin: auto;

        }
        .b1 {
            margin-bottom: 20px;
        }
        .b2 {
            font-weight: bold;
            margin-top: 10px;
        }

        .box3
        {
            width: 300px;
            height: 600px;
            background-color: aquamarine;
            margin: auto;
        }
        .box4
        {
            width: 300px;
            height: 500px;
            background-color: aquamarine;
            margin: auto;
            display: none;
        }
    </style>

</head>
<body><div id="bbox" class="bbox"><p></p>
    <div id="box1" class="box1">
      请记住这张图片
       <img src="3.jpg" alt="" height="250px" >
      
       <button id="anniu2">确定</button>
    </div>
    <!-- 第二个盒子 -->
    <div id="box2" class="box2">
    哪一个是原图：
    <img src="4.jpg" alt="">
    <div class="b1">
        <input type="text" id="a5" name="a5" placeholder="请输入答案">
    </div>
    
    <button onclick="a6()">提交</button>
    
    <div class="b2" id="a8"></div>
    <button id="anniu3">再看一遍</button> 
    <button id="anniu4">下一题</button>
    </div>
    <!-- 下一题 -->
    <div id="box3" class="box3">
        请记住这张图片
        <img src="5.jpg" alt="" width="300px">
        <button id="anniu5">上一页</button>
        <button id="anniu6">确定</button>
    </div>
    <div id="box4" class="box4">
        图中一共有多少个软件（图标）？
        <img src="6.png" alt="" width="300px">
        <div class="b1">
            <input type="text" id="aa5" name="aa5" placeholder="请输入答案">
            <button id="tijiao" onclick="aa6()">提交</button>
            <div class="jg" id="jg"></div>
            
        </div>
        
        
   </div>
    <script>
        var box1=document.querySelector('.bbox');
        var tip=document.querySelector('p');
        //设置关闭时间
        var time=500;
        fn();
        var timer=setInterval(fn,1000);
        function fn()
        {
            if(time==0)
        {
            bbox.style.display='none';
            clearInterval(timer);
        }
        tip.innerHTML=time+'秒后自动关闭';
        time--;
        }

    document.addEventListener('DOMContentLoaded', function() {
    var box1 = document.getElementById('box1');
    var box2 = document.getElementById('box2');
    
    // 初始显示第一个盒子
    box1.style.display = 'block';

    anniu2.addEventListener('click', function() {
      
        if (box1.style.display === 'block') {
            box1.style.display = 'none';
            box2.style.display = 'block';
         } 
    });
    anniu3.addEventListener('click', function() {
        box1.style.display = 'block';
        box2.style.display = 'none';
    });
});

document.addEventListener('DOMContentLoaded', function() {
    var box2 = document.getElementById('box2');
    var box3 = document.getElementById('box3');
    
    // 初始显示第二个盒子
    box3.style.display = 'none';

    anniu4.addEventListener('click', function() {
        if (box2.style.display === 'block') {
            box2.style.display = 'none';
            box3.style.display = 'block';
         } 
        anniu5.addEventListener('click', function() {
        box2.style.display = 'block';
        box3.style.display = 'none';
    });
    });
});

document.addEventListener('DOMContentLoaded', function() {
    var box2 = document.getElementById('box2');
    var box3 = document.getElementById('box3');
    
    anniu6.addEventListener('click', function() {
        if (box3.style.display === 'block') {
            box3.style.display = 'none';
            box4.style.display = 'block';
         } 
    });
});

function a6() {
        const a7= "4";
        const a5 = document.getElementById('a5');
        const a9 = a5.value.trim(); 
        const a10 = document.getElementById('a8');//hq

        if (a9 === a7) {
            a10.textContent = "恭喜你，答对了！";
            a10.style.color = "green";
        } else {
            a10.textContent = "不好意思，答错了，再努力哦。";
            a10.style.color = "red"; 
        }
        document.getElementById('a5').disabled = true; 
    }
   function aa6(){
    let srjg=document.getElementById("a55");
    let zqjg="C";
    if(srjg==zqjg)
   {
    document.getElementById("jg").innerText='结果：'+"答对了";
   }
   else{
    document.getElementById("jg").innerText='结果：'+"答错了";
   }
    //document.getElementById('jg').innerText = '结果: ' + (srjg === zqjg ? '非常棒！答对了' : '继续加油，正确答案是 ' + zqjg);
   }
    </script>
</body>
</html>